<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="120px"
    >
      <el-form-item label="发送方手机号" prop="n">
        <el-input
          v-model="queryParams.n"
          placeholder="请输入发送方手机号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="接收方手机号" prop="to">
        <el-input
          v-model="queryParams.to"
          placeholder="请输入接收方手机号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="type">
        <el-select
          v-model="queryParams.type"
          placeholder="请选择状态"
          size="small"
          clearable
        >
          <el-option
            v-for="dict in typeArr"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="卡位类型" prop="category">
        <el-select v-model="queryParams.category" placeholder="请选择卡位类型">
          <el-option
            v-for="(dict, index) in phonecategoryList"
            :key="index"
            :label="dict.remark"
            :value="dict.remark"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-table :data="msgList" border>
      <el-table-column label="id" align="center" prop="id" width="88" />
      <el-table-column
        label="创建人"
        align="center"
        prop="createName"
        width="156"
      />
      <el-table-column
        label="卡位类型"
        width="100"
        align="center"
        prop="category"
      />
      <el-table-column prop="type" label="短信类型" width="100" align="center">
        <template slot-scope="scope">
          <div class="zdy-des" style="color: green" v-if="scope.row.type == 1">
            发送
          </div>
          <div class="zdy-des" style="color: red" v-if="scope.row.type == 2">
            接收
          </div>
        </template>
      </el-table-column>
      <el-table-column label="发送方手机号" align="center" prop="n" />
      <el-table-column label="接收方手机号" align="center" prop="to" />
      <el-table-column label="发送内容" align="center" prop="txt" width="366" />
      <el-table-column label="状态" align="center" prop="code">
        <template #default="{ row }">
          <div style="color: green" v-if="row.code == 200">成功</div>
          <div style="color: red" v-else>失败</div>
        </template>
      </el-table-column>
      <el-table-column label="结果" align="center" prop="result" width="266" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
    </el-table>
    <div style="text-align: right; margin-top: 200">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

  <script>
import phoneApi from "../../api/phoneManage";
import { getDicts } from "@/api/system/dict/data";
export default {
  name: "Msg",
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        n: null,
        to: null,
        type: null,
      },
      total: 0,
      msgList: [],
      typeArr: [
        { name: "发送", id: 1 },
        { name: "接收", id: 2 },
      ],
      phonecategoryList: [],
    };
  },
  created() {
    this.getList();
    this.getPhoneCategoryInfo();
  },
  methods: {
    //获取卡位类型
    async getPhoneCategoryInfo() {
      const res = await getDicts("tel_sms_config");
      console.log("res", res);
      this.phonecategoryList = res.data;
    },
    /** 查询短信发送记录列表 */
    getList() {
      this.loading = true;
      phoneApi.listMsg(this.queryParams).then((response) => {
        this.msgList = response.rows;
        this.total = response.total;
      });
    },
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        n: null,
        to: null,
        type: null,
      };
      this.getList();
    },
    handleQuery() {
      this.getList();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageNum = val;
      this.getList();
    },
  },
};
</script>
